<template>
  <div class="screen-map">
    <img v-show="index == 0" class="screen-map__img" src="../../assets/screen/bg_map01.png"/>
    <img v-show="index == 1" class="screen-map__img" src="../../assets/screen/bg_map02.png"/>
    <img v-show="index == 2" class="screen-map__img" src="../../assets/screen/bg_map03.png"/>
    <div class="map-nav fy-flex fy-flex__center">
      <div class="fy-btn" @click="index=0" :class="[index == 0? 'nav-active' : '']" >项目分布图</div>
      <div class="fy-btn" @click="index=1" :class="[index == 1? 'nav-active' : '']" >火灾热力图</div>
      <div class="fy-btn" @click="index=2" :class="[index == 2? 'nav-active' : '']" >警力热力图</div>
    </div>
    <div class="map-content fy-flex fy-flex__center">
      <div class="amap-wrapper">
        <el-amap class="amap-box" :vid="'amap-vue'" :mapStyle="'amap://styles/fa45c76ddf123a00b53c7a3b4eb6de19'"></el-amap>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 全局感知
  name: "screenMap",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {},

  // 本地状态
  data() {
    return {
      index: 0
    };
  },
  computed: {},
  // 事件
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  // 非响应式的属性
  methods: {}
};
</script>

<style lang="scss" scoped>
.screen-map {
  position: relative;
  width: 100%;
  height: calc(90vh - 5rem);
  .screen-map__img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .map-nav {
    position: relative;
    width: 100%;
    height: 6%;
    div {
      flex: 1;
      color: white;
      cursor: pointer;
      font-size: 2rem;
    }
    .nav-active {
      color: #00d2ff;
    }
  }
  .map-content {
    position: relative;
    width: 100%;
    height: 94%;
    .amap-wrapper {
      width: 90%;
      height: 94%;
      border: 0.1rem solid #00fbff;
    }
  }
}
</style>
